<template>
  <div class="tc fs-3 p-1">电影排片管理</div>
  <!-- 查询表单 -->
  <NFlex>
    {{ queryInfo }}-{{ addInfo }}
    <NForm inline>
      <NFormItem>
        <NDatePicker
          value-format="yyyy-MM-dd"
          v-model:formatted-value="queryInfo.date"
          clearable
        ></NDatePicker>
      </NFormItem>

      <NFormItem>
        <NButton strong secondary @click="selectQuery">{{ btnText }}</NButton>
      </NFormItem>

      <NFormItem>
        <NSpace>
          <NButton type="info" @click="requery">查询</NButton>
          <NButton type="error" @click="reset">重置</NButton>
          <NButton type="success" @click="showAdd">添加</NButton>
        </NSpace>
      </NFormItem>
    </NForm>
  </NFlex>

  <!-- 表格 -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div class="page">
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination>
    </NFlex>
  </div>

  <!-- 添加的模态框 -->
  <NModal v-model:show="avisible" preset="dialog" title="添加排片信息" @after-leave="requery">
    <div>
      <NForm>
        <NFormItem>
          <NButton strong secondary @click="svisible = true">{{ btnAddText }}</NButton>
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.hall" placeholder="请输入排片大厅名"></NInput>
        </NFormItem>
        <NFormItem>
          <NDatePicker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" clearable></NDatePicker>
        </NFormItem>
      </NForm>
    </div>

    <template #action>
      <NSpace>
        <NButton type="success" @click="add" :loading="loading">添加</NButton>
        <NButton type="error" @click="resetAdd">重置</NButton>
      </NSpace>
    </template>
  </NModal>

  <!-- 选择电影 -->
  <NModal v-model:show="svisible" preset="dialog" title="选择电影">
    <div>
      <MovieComp mode="selector" @info-selected="selectMovie"></MovieComp>
    </div>
  </NModal>
</template>

<script setup lang="ts">
import MovieComp from '@/components/MovieComp.vue'
import { ref, h, onMounted } from 'vue'
import {
  useMessage,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NModal,
  NDatePicker,
  NPagination,
  NFlex,
  NSpace,
} from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import type { TbMovie, TbMoviesCheduling } from '@/types/crud'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'

const message = useMessage()
// const dialog = useDialog()
const loading = ref(false)
// const dateinfo = ref(null)

// 时间校验，时间选择器限定，不能选过去的时间
// const dateValidate = (ts: number) => {
//   return new Date().getTime() > ts
// }

const selectMode = ref('query')
const svisible = ref(false)
const btnText = ref('请选择电影')

const selectMovie = (info: TbMovie) => {
  svisible.value = false
  if (selectMode.value == 'query') {
    btnText.value = info.title
    queryInfo.value.mid = info.mid
  } else if (selectMode.value == 'add') {
    btnAddText.value = info.title
    addInfo.value.mid = info.mid
  }
}

//#region 查询
const queryInfo = ref({ date: null, mid: -1 })
const list = ref([] as Array<TbMoviesCheduling>)
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)

const query = () => {
  loading.value = true
  Api.get(
    `/crud/moviescheduling/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVO<TbMoviesCheduling>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  query()
})

const columns: DataTableColumn<TbMoviesCheduling>[] = [
  { title: '电影名称', key: 'movie.title' },
  { title: '排片大厅名称', key: 'hall' },
  {
    title: '放映时间',
    key: 'startTime',
    render(row) {
      return h('span', {}, Tools.formatDate(row.startTime as number, 'yyyy-MM-dd hh:mm:ss'))
    },
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(NButton, { type: 'warning', size: 'small', onClick: () => {} }, '修改'),
        h(NButton, { type: 'error', size: 'small', onClick: () => {} }, '删除'),
      ])
    },
  },
] as DataTableColumn<TbMoviesCheduling>[]

// 查询表单
const selectQuery = () => {
  selectMode.value = 'query'
  svisible.value = true
  btnText.value = '请选择电影'
  queryInfo.value.mid = -1
}

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const reset = () => {
  queryInfo.value = { date: null, mid: -1 }
  btnText.value = '请选择电影'
  requery()
}

//#endregion

//#region 添加
const avisible = ref(false)
const addInfo = ref({ startTime: '' } as TbMoviesCheduling)
const btnAddText = ref('请选择电影')

const showAdd = () => {
  resetAdd()
  selectMode.value = 'add'
  avisible.value = true
}
const resetAdd = () => {
  addInfo.value.mid = -1
  addInfo.value.hall = ''
  addInfo.value.startTime = ''
  btnAddText.value = '请选择电影'
}
const add = () => {
  loading.value = true
  Api.post('/crud/moviescheduling', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('添加成功')
      resetAdd()
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region 修改

//#endregion

//#region 删除

//#endregion
</script>

<style scoped lang="scss"></style>
